<template>
    <div>
        <div class="title">热销推荐</div>
            <ul>
                <li class="item border-bottom" v-for="item of list" :key="item.id">
                    <img class="item-img" :src="item.imgUrl" />
                    <div class="class-info">
                        <p class="item-title">{{item.title}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <button class="item-button">查看详情</button>
                    </div>
                </li>
            </ul>
    </div> 
</template>
<script>
    export default{
        name:"HomeRecommend",
        props: {
            list: Array
        }
    }
</script>
<style lang="stylus" scoped>
    .title{
        margin-top:.2rem;
        background:#eee;
        line-height:.8rem;
        text-indent:.2rem;
    }
    .item{
        overflow:hidden;
        display :flex;
        height:1.9rem;
        background:#fff;
    }
    .item-img{
        width:1.7rem;
        height:1.7rem;
        padding:.1rem;
    }
    .item-info{
        flex:1;
        padding:.1rem;
        min-width:0;
    }
    .item-title{
        line-height:.54rem;
        font-size:.32rem;
        overflow:hidden;
        white-space:no;
        text-overflow:ellipsis;
    }
    .item-desc{
        margin-top:.1rem;
        line-height:.4rem;
        color:#ccc;
        overflow:hidden;
        white-space:no;
        text-overflow:ellipsis;
    }
    .item-button{
        margin:.2rem 0 0 .2rem;;
        background :#ff9300;
        padding:0 .1rem;
        border-radius:.06rem;
        color:#fff; 
    }
</style>
